<template>
  <div class="carousel_wrap">
    <video
      src="../../assets/asissi/video/JiaoYe_mini.mp4"
      poster="../../assets/asissi/home.png"
      muted
      :autoplay="!controls"
      :controls="controls"
      loop
      style="width: 100%; display: flex"
    ></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      controls: false,
    };
  },
  mounted() {
    if (
      document.body.clientWidth < 768 &&
      navigator.userAgent.toLocaleLowerCase().indexOf("micromessenger") > -1
    ) {
      this.controls = true;
    }
  },
};
</script>

<style lang="scss">
.carousel_wrap {
  position: relative;
  @media screen and (max-width: 768px) {
    margin-top: 26px;
  }
}
</style>
